<template>
  <div id="nav">
    <div id="login-container">
      <div style="text-align: center; height: 50px">欢迎使用</div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="user">
            <el-input
              type="text"
              v-model="username"
              autocomplete="off"
              clearable
              autofocus
              placeholder="请输入账号"
              class="zhanghao"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="pwd"
              autocomplete="off"
              clearable
              show-password
              placeholder="请输入密码"
              class="mima"
            ></el-input>
            <el-radio-group v-model="role">
              <el-radio :label="2">教师</el-radio>
              <el-radio :label="3">学校管理员</el-radio>
              <el-radio :label="1">系统管理员</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <Verify
              ref="loginVerifyRef"
              :type="3"
              :showButton="false"
              :barSize="{ width: '100%', height: '40px' }"
              :fontSize="'16px'"
              @success="onVerifySuccess"
              @error="onVerifyError"
            >
            </Verify>
          </el-form-item>
          <el-form-item>
            <div class="tool">
              <div>
                <span class="shou" @click="forgetpas">忘记密码？</span>
              </div>
            </div>
          </el-form-item>

          <div class="denglu">
            <el-button type="primary" @click="userLogin">登录</el-button>
          </div>
        </el-form>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Verify from "vue2-verify";
import { mapActions, mapGetters } from "vuex";
// import dongRouter from './../router/dongRouter'
export default {
  name: "Login",
  data() {
    return {
      username: "",
      pwd: "",
      role: 2,

      checked: false,
    };
  },
  mounted() {
    if (localStorage.getItem("news")) {
      this.form = JSON.parse(localStorage.getItem("news"));
      this.checked = true;
    }
  },

  components: {
    Verify,
  },

  methods: {
    //选项卡切换
    handleClick(tab, event) {},

    //忘记密码
    forgetpas() {
      this.$message({
        type: "info",
        message: "请尽快联系管理员😥",
        showClose: true,
      });
    },

    ...mapActions(["isLogin", "loginSuccess"]),

    userLogin() {
      let username = this.username;
      let pwd = this.pwd;

      this.isLogin({ name: username, pwd, role: this.role }).then((res) => {
        console.log(res.data.data.data.username);
        console.log(res.data.data.data.token);
        // if (res.data.code != 200) {
        //   this.$message.error("用户不存在");
        //   return;
        // }

        if (res.data.data.data != "请仔细输入您的账户密码，选择您的角色") {
          //  this.loginSuccess(res);
          const token = res.data.data.data.token;
          const name = res.data.data.data.username;
          const rid = res.data.data.data.rid;
          const rname = res.data.data.data.roleName;
          const uid = res.data.data.data.uid;

          localStorage.setItem("uid", uid);
          localStorage.setItem("token", token);
          localStorage.setItem("name", name);
          localStorage.setItem("rid", rid);
          localStorage.setItem("rname", rname);
          this.$message({
            message: "欢迎回来,master",
            type: "success",
            showClose: true,
          });
          this.$router.push("/home");
        } else {
          this.$message({
            message: "请仔细输入您的账户密码，选择您的角色",
            type: "error",
            showClose: true,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
#nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 200px;
  
}
#login-container {
  width: 800px;
  padding:30px;
  background: url("../assets/images/默认背景.png");
  background-size: 100%;
  /* background: #b9b9b9; */
  /* position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -260px;
  margin-top: -270px; */
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding-top: 40px;
  padding-right: 40px; */
   box-shadow: 0px 5px 10px 0px rgba(191, 21, 108, 0.05);
}
/* body {
  width: 100%;
  background-color: rgb(239, 239, 239);
} */

.tool {
  display: flex;
  justify-content: end;
  color: #000000;
  /* margin: 0px; */
}
.el-form-item {
  margin: 10px;
}
.denglu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.shou {
  cursor: pointer;
  color: #000000;
}
</style>